<template>
  <!-- <div class="scroll-div"> -->
    <scroll-bar>
      <el-menu
        mode="vertical"
        :default-active="$route.path"
        :collapse="isCollapse"
        text-color="#303133"
      >
        <sidebar-item :routes="permission_routers"></sidebar-item>
      </el-menu>
    </scroll-bar>
  <!-- </div> -->
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './layoutSidebarItem'
import ScrollBar from '@/components/ScrollBar'

export default {
  name: 'layoutSidebar',
  components: { SidebarItem, ScrollBar },
  computed: {
    ...mapGetters(['permission_routers', 'sidebar']),
    isCollapse () {
      return !this.sidebar.opened
    }
  },
  mounted () {
    // console.log(this.permission_routers)
  }
}
</script>
<style scoped>
.scroll-div {
  overflow: hidden;
  background-color: #fff!important;
}
/* .my-scroll-bar {
  position: absolute;
} */
</style>
